<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="keyword" label-width="95px">
            <el-form-item label="员工姓名">
                <el-input v-model="keyword.staffName" placeholder="员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="员工类型">
                <el-select v-model="keyword.jobCategory" placeholder="员工类型">
                    <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 30px;">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDleteBatch">删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="resetSearchForm('searchForm')"
                    icon="el-icon-refresh">重置</el-button>
            </el-form-item>
            <el-button type="primary" plain size="primary" @click="dialogExcelVisible = true"
                icon="el-icon-upload2">导入</el-button>
            <el-button type="primary" plain size="primary" @click="downloadExcel" icon="el-icon-download">导出</el-button>
        </el-form>

        <!-- 上传excel的对话框 -->
        <el-dialog title="上传员工信息Excel" :visible.sync="dialogExcelVisible" width="40%">
            <el-upload class="upload-demo" drag
                action="http://localhost:8081/serviceManagement/maintenanceCleaningStaffInfo/upload/excel"
                accept=".xlsx,.xls" :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传.xlsx或.xls文件, 且不超过500kb</div>
            </el-upload>
        </el-dialog>

        <!-- 数据表格 -->
        <el-table :data="tableData" tooltip-effect="dark" class="customer-table"
            @selection-change="handleSelectionChange" width="100%">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="staffName" label="员工名称" width="180" align="center"></el-table-column>
            <el-table-column prop="contactNumber" label="联系电话" width="200" align="center"></el-table-column>
            <el-table-column prop="idNumber" label="身份证号" width="200" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="120" align="center"></el-table-column>
            <el-table-column prop="jobCategory" label="工作类别" width="180" align="center"></el-table-column>
            <el-table-column prop="hireDate" label="聘用时间" width="200" align="center"></el-table-column>
            <el-table-column prop="comments" label="评价" width="180" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pagination">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑客户" :visible.sync="editDialogVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="员工名称">
                    <el-input v-model="editForm.staffName" placeholder="员工名称"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editForm.contactNumber" placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="editForm.idNumber" placeholder="身份证号"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="editForm.gender">
                        <el-radio label="男" name="gender"></el-radio>
                        <el-radio label="女" name="gender"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="工作类别">
                    <el-select v-model="editForm.jobCategory" placeholder="工作类别">
                        <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="聘用时间">
                    <el-date-picker v-model="editForm.hireDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="聘用时间" />
                </el-form-item>
                <el-form-item label="离职时间">
                    <el-date-picker v-model="editForm.quitDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="离职时间" />
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="editForm.comments" placeholder="评价"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="editFormSubmit">确定</el-button>
            <el-button type="default" @click="editDialogVisible = false">取消</el-button>
        </el-dialog>

        <!-- 新增弹窗 -->
        <el-dialog title="新增客户" :visible.sync="addDialogVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="100px">
                <el-form-item label="员工名称">
                    <el-input v-model="addForm.staffName" placeholder="员工名称不能为空"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="addForm.contactNumber" placeholder="联系电话不能为空"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="addForm.idNumber" placeholder="身份证号不能为空"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addForm.gender">
                        <el-radio label="男" name="gender"></el-radio>
                        <el-radio label="女" name="gender"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="工作类别">
                    <el-select v-model="addForm.jobCategory" placeholder="工作类别">
                        <el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="聘用时间">
                    <el-date-picker v-model="addForm.hireDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="聘用时间" />
                </el-form-item>
                <el-form-item label="离职时间">
                    <el-date-picker v-model="addForm.quitDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="离职时间" />
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="addForm.comments" placeholder="工作类别"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addFormSubmit">确定</el-button>
            <el-button type="default" @click="addDialogVisible = false">取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
import { getByParam, update, add, deleteBatch, deleteById } from '@/api/psm/staffInfo';
import { getCategory } from '@/api/psm/serviceInfo';

export default {
    name: 'staffInfo',
    data() {
        return {
            // 数据表单信息
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 搜索条件
            keyword: {
                staffName: '',
                jobCategory: ''
            },
            // 下拉框信息
            categoryList: [],
            // 导入excel对话框
            dialogExcelVisible: false,
            // 批量删除
            ids: [],
            // 编辑弹窗
            editDialogVisible: false,
            editForm: {
                staffId: '',
                staffName: '',
                contactNumber: '',
                idNumber: '',
                gender: '',
                jobCategory: '',
                hireDate: '',
                quitDate: '',
                comments: ''
            },
            // 新增弹窗
            addDialogVisible: false,
            addForm: {
                staffId: '',
                staffName: '',
                contactNumber: '',
                idNumber: '',
                gender: '',
                jobCategory: '',
                hireDate: '',
                quitDate: '',
                comments: ''
            },
        }
    },

    created() {
        this.currentPage = 1;
        this.fetchData();
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 获取下拉框信息
            this.getInfo();
            // 传入搜索条件
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                staffName: this.keyword.staffName,
                jobCategory: this.keyword.jobCategory
            };
            // 获取列表数据
            getByParam(params).then(response => {
                console.log("staffInfo列表, response", response);
                this.tableData = response.data.list;
                this.total = response.data.total;

                // 更新 Imarkd
                this.updateImarkd();
            });
        },

        // 更新自增的 Imarkd
        updateImarkd() {
            this.tableData.forEach((item, index) => {
                this.$set(item, 'Imarkd', index + 1 + (this.currentPage - 1) * this.pageSize);
            });
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            this.ids = [];
            selectionRowArray.forEach(item => this.ids.push(item.staffId));
        },

        // 批量删除
        handleDleteBatch() {
            this.$confirm('确定删除选中的[' + this.ids + ']条数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData(); // 更新表格数据
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 打开编辑弹窗
        handleEdit(index, row) {
            this.editForm = row;
            console.log("编辑, row", row);
            this.getInfo(); // 传入下拉框信息
            this.editDialogVisible = true;
        },

        // 编辑弹窗提交
        editFormSubmit() {
            console.log("编辑, editForm", this.editForm);
            update(this.editForm).then(res => {
                console.log("编辑, res", res);
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                this.editDialogVisible = false;
                this.fetchData(); // 更新数据
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '编辑失败!'
                });
            });
        },

        // 开启新增弹窗
        handleAdd() {
            console.log("新增");
            this.addForm = {}; // 清空表单数据
            this.getInfo(); // 传入下拉框信息
            this.addDialogVisible = true;
        },

        // 新增弹窗提交
        addFormSubmit() {
            // // 检查员工名，电话，身份证号是否为空
            if (!this.addForm.staffName) {
                this.$message({
                    type: 'error',
                    message: '员工名称不能为空!'
                });
                return;
            }
            if (!this.addForm.contactNumber) {
                this.$message({
                    type: 'error',
                    message: '联系电话不能为空!'
                });
                return;
            }
            if (!this.addForm.idNumber) {
                this.$message({
                    type: 'error',
                    message: '身份证号不能为空!'
                });
                return;
            }
            add(this.addForm).then(res => {
                console.log("新增, res", res);
                this.$message({
                    type: 'success',
                    message: '新增成功!'
                });
                this.addDialogVisible = false;
                this.fetchData(); // 更新数据
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '新增失败!'
                });
            });
        },

        // 页面大小变化
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData(); // 更新数据
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchData(); // 更新数据
        },

        // 搜索
        handleSearch() {
            this.fetchData(); // 更新数据
        },

        // 删除单行
        handleDelete(index, row) {
            console.log("删除, row", row);
            this.$confirm('确定删除编号为 ' + row.staffId + ' 的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteById(row.staffId).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData(); // 更新表格数据
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 上传excel文件, 上传成功后, 关闭对话框, 刷新页面数据
        uploadExcelSuccess() {
            this.$message({
                type: "success",
                message: "上传成功"
            })
            this.dialogExcelVisible = false;
            this.fetchData();
        },

        // 上传excel文件失败
        uploadExcelError(err) {
            this.$message({
                type: "error",
                message: err
            })
        },

        // 导出excel文件, 即点击导出按钮后打开的对话框时触发
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.location.href = "http://localhost:8081/serviceManagement/maintenanceCleaningStaffInfo/download/excel"
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },

        // 获取下拉框信息
        getInfo() {
            this.categoryList = []; // 清空下拉框信息
            getCategory().then(response => {
                console.log("下拉框信息, response", response);
                response.data.forEach(item => {
                    this.categoryList.push({
                        value: item.jobCategory,
                        label: item.jobCategory
                    });
                });
            });
        },

        // 重置搜索条件
        resetSearchForm() {
            this.keyword = {
                staffName: '',
                jobCategory: ''
            };
            this.fetchData(); // 更新表格数据
        },
    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}

.customer-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
    /* 使表格列内容居中 */
}
</style>
